<template>
  <div class="strut-div" id="shanxiMap">
  </div>
</template>

<script>
  import echarts from 'echarts';
  import '../../../../static/shanxi.js'; // 引入山西地图数据
  //旅游迁徙图初始化配置
  const geoCoordMap = {
    //可以在地图上显示的城市的坐标信息
    太原: [112.549248, 37.857014],
    大同: [113.295259, 40.09031],
    阳泉: [113.583285, 37.861188],
    长治: [113.113556, 36.191112],
    晋城: [112.851274, 35.497553],
    朔州: [112.433387, 39.331261],
    晋中: [112.736465, 37.696495],
    运城: [111.003957, 35.022778],
    忻州: [112.733538, 38.41769],
    临汾: [111.517973, 36.08415],
    吕梁: [111.134335, 37.524366],
    洪洞: [111.681922, 36.259562]
  };
  const HFData = [
    // 数据中name的城市名称必须与geoCoordMap中城市名称一致, 不然关联不上，洪洞到各地区的线路
    [{
      name: '洪洞'
    }, {
      name: '太原',
      value: 66
    }],
    [{
      name: '洪洞'
    }, {
      name: '大同',
      value: 66
    }],
    [{
      name: '洪洞'
    }, {
      name: '阳泉',
      value: 66
    }],
    [{
      name: '洪洞'
    }, {
      name: '长治',
      value: 66
    }],
    [{
      name: '洪洞'
    }, {
      name: '晋城',
      value: 66
    }],
    [{
      name: '洪洞'
    }, {
      name: '朔州',
      value: 66
    }],
    [{
      name: '洪洞'
    }, {
      name: '晋中',
      value: 66
    }],
    [{
      name: '洪洞'
    }, {
      name: '运城',
      value: 66
    }],
    [{
      name: '洪洞'
    }, {
      name: '忻州',
      value: 66
    }],
    [{
      name: '洪洞'
    }, {
      name: '临汾',
      value: 66
    }],
    [{
      name: '洪洞'
    }, {
      name: '洪洞',
      value: 122,
    }],
    [{
      name: '洪洞'
    }, {
      name: '吕梁',
      value: 66
    }]
  ];
  var planePath = 'arrow'; // 箭头的svg
  // push进去线路开始-结束地点-经纬度
  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = geoCoordMap[dataItem[1].name];
      var toCoord = geoCoordMap[dataItem[0].name];
      if (fromCoord && toCoord) {
        res.push([
          {
            coord: fromCoord
          },
          {
            coord: toCoord
          }
        ]);
      }
    }
    return res;
  };
  const color = ['#555', '#FFFFA8', '#46bee9']; //圆圈和字的颜色，线的颜色，箭头颜色
  // 数据
  var series = [];
  // 遍历由洪洞到其他城市的线路
  [
    ['洪洞', HFData]
  ].forEach(function (item, i) {
    // 配置
    series.push({
      type: "lines",
      zlevel: 2,
      effect: {
        show: true,
        period: 5, //箭头指向速度，值越小速度越快
        trailLength: 0.11, //特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: "arrow", //箭头图标
        symbolSize: 5 //图标大小
      },
      lineStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#58B3CC'
          }, {
            offset: 1,
            color: '#F58158'
          }], false),
          width: 1,
          opacity: 0.1,
          curveness: 0.1
        }
      },

      data: convertData(item[1]),
      tooltip: {
        show: false
      }
    }, {
      // 目的地信息
      name: item[0],
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: {
        brushType: 'fill'
      },
      label: {
        normal: {
          show: true,
          position: 'right',
          offset: [10, 0],
          formatter: '{b}',
          color: "#ffffff"
        }
      },
      symbolSize: function (val) {
        return val[2] / 8;
      },
      itemStyle: {
        normal: {
          color: '#77F7E7'
        }
      },
      data: item[1].map(function (dataItem) {
        return {
          name: dataItem[1].name,
          value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]),
          label: dataItem[1].name == '洪洞' ? {fontSize:22} : {}
        };
      })
    });
  });

  export default {
    name: 'shanxiMapChart',
    data() {
      return {
        chart: null
      };
    },
    methods: {
      initShanxiMap() {
        let option = {
          geo: {
            map: 'shanxi',
            roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启

            zoom: '',
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: '#00a0c9'
                }
              },
              emphasis: {
                // 对应的鼠标悬浮效果
                show: false,
                textStyle: {
                  color: '#00a0c9'
                }
              }
            },

            aspectScale: 0.9,

            layoutCenter: ['50%', '50%'], //地图位置
            layoutSize: '90%',
            itemStyle: {
              normal: {
                areaColor: 'rgba(1, 108, 143, 1)',
                borderColor: '#8F98A6'
              },
              emphasis: {
                borderWidth: 0,
                borderColor: '#0066ba',
                areaColor: '#0494e1',
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: series
        };
        this.chart = echarts.init(document.getElementById('shanxiMap'));
        this.chart.setOption(option);
        // setTimeout(() => {
        //
        // }, 100);
      }
    },
    mounted() {}
  };

</script>

<style scoped lang="scss" type="text/scss">
  .centerItem {
  height: 100%;
  width: 100%;
}
</style>
